{% extends "../../_basic.twig" %}

{% block header %}
    <script src="../../../src/aux-dropdown/index.js?v={{random()}}"></script>
    <link rel="stylesheet" href="../../../src/aux-dropdown/index.css?v={{random()}}">
    <style>
    aux-dropdown-menu {
        width: 170px;
        height: 270px;
        background-color: #eee;
    }
    </style>
{% endblock %}

{% block body %}
    <div>      
        <h3>默认</h3>        
        <aux-dropdown for="tiandijiandiyichaojizhanshi">dropdown</aux-dropdown>
        <aux-dropdown-menu id="tiandijiandiyichaojizhanshi">
            dropdown menu            
        </aux-dropdown-menu>

        <h3>outside true</h3>        
        <aux-dropdown outside="true" for="tiandijiandiyichaojizhanshs">dropdown</aux-dropdown>
        <aux-dropdown-menu style="position: absolute;" id="tiandijiandiyichaojizhanshs">
            dropdown menu
        </aux-dropdown-menu>

        <h3>hover</h3>        
        <aux-dropdown type="hover" for="tiandijiandiyichaojizhanshm">dropdown</aux-dropdown>
        <aux-dropdown-menu id="tiandijiandiyichaojizhanshm">
            dropdown menu
        </aux-dropdown-menu>
    </div>
{% endblock %}

